<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>ES6的导出导入方式 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="JavaScript" />
  
  <meta name="description" content="::: tip 介绍 学习一下常用的ES6的导出导入方式:::">
<meta property="og:type" content="article">
<meta property="og:title" content="ES6的导出导入方式">
<meta property="og:url" content="https://cuishikang.gitee.io/2022/01/24/JavaScript/0.5_es6_export/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍 学习一下常用的ES6的导出导入方式:::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2022-01-23T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.537Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">ES6的导出导入方式</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2022-01-24</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~6.15K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178537"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍</p>
<p>学习一下常用的ES6的导出导入方式<br><br>:::</p>
<span id="more"></span>

<h2 id="了解一下js的导出导入历史"><a href="#了解一下js的导出导入历史" class="headerlink" title="了解一下js的导出导入历史"></a>了解一下js的导出导入历史</h2><ul>
<li>在ES5中，如果你的js文件是依赖于其他js文件（例如：jquery、bootsrap.js等），那么你必须在html中先加载这些依赖，也就是要控制好每个js的加载顺序。想想为什么不能像java和Python中的import方式来解决呢？<br>其实在ES6中就引入了export与import概念，将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。</li>
<li>在ES5时期出现了两种模块化导入方式 <code>commonJS </code>和<code>AMD/CMD</code></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 这样的导入方式是ES5的commonJS引入方式 type=&quot;module&quot; 表示使用模块化 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;XXX/AAA.js&quot;</span> <span class="attr">type</span>=<span class="string">&quot;module&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;XXX/BBB.js&quot;</span> <span class="attr">type</span>=<span class="string">&quot;module&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>那么在ES6中使用新的方法进行模块化： 使用 <code>export</code> 和 <code>import</code> 关键字</li>
</ul>
<blockquote>
<p>export模块化导出的解释</p>
</blockquote>
<ul>
<li>一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。</li>
</ul>
<h2 id="ES6导出导入变量"><a href="#ES6导出导入变量" class="headerlink" title="ES6导出导入变量"></a>ES6导出导入变量</h2><ul>
<li>ES6使用<code>export</code> 分为两种方式 <ul>
<li>声明导出<code>export &#123; 名称 &#125;</code> 和默认导出<code>export default&#123; 需要导出的内容 &#125;</code></li>
</ul>
</li>
</ul>
<h3 id="默认导出"><a href="#默认导出" class="headerlink" title="默认导出"></a><strong>默认导出</strong></h3><ul>
<li>默认导出顾名思义就是不起名字 使用默认的名称导出 导入的时候 可以随便给他起名字 没有要求 也不需要带<code>&#123;&#125;</code></li>
<li>只能导出一个对象 不能导入多个对象</li>
<li>导出的时候不需要<code>&#123;&#125;</code></li>
</ul>
<blockquote>
<p>举个例子</p>
</blockquote>
<ul>
<li>我要导出一个js文件 使用默认导出</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 我是默认导出哦</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">demo</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">demo1</span>: <span class="literal">true</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>在vue中我要导入这个js文件</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; onMounted &#125; from &#x27;vue&#x27;</span><br><span class="line">// 导入我们要的js文件 默认导出可以随便起名字</span><br><span class="line">import demo from &#x27;@/config/config.js&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;Home&#x27;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    onMounted(() =&gt; &#123;</span><br><span class="line">        // 打印导入的js文件的内容</span><br><span class="line">      console.log(demo)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>在页面打印的效果</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220124112625019.png" alt="image-20220124112625019"></p>
<h3 id="命名导出"><a href="#命名导出" class="headerlink" title="命名导出"></a><strong>命名导出</strong></h3><ul>
<li>命名导出顾名思义就是起名字 使用命名后的名称导出 导入的时候 不可以随便给他起名字 必须使用导出的名称 需要带<code>&#123;&#125;</code></li>
<li>可以导出多个对象 前提是都需要命名( 注意唯一性 )</li>
<li>导出的时候必须带<code>&#123;&#125;</code></li>
</ul>
<blockquote>
<p>举个例子</p>
</blockquote>
<ul>
<li>我要导出一个js文件 使用命名导出</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 我要导出多个变量哦 要给每个变量起一个唯一的名称</span></span><br><span class="line"><span class="keyword">const</span> retFirst = &#123;</span><br><span class="line">  <span class="attr">demo</span>: <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> retsSecond = &#123;</span><br><span class="line">  <span class="attr">demo1</span>: <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 进行命名导出 把我起的所有变量都导出</span></span><br><span class="line"><span class="keyword">export</span> &#123; retFirst, retsSecond &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>在vue中我要导入这个js文件</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; onMounted &#125; from &#x27;vue&#x27;</span><br><span class="line">// 导入我们要的js文件 命名导出必须使用你命名的名称 不可以随便起</span><br><span class="line">import &#123; retFirst, retsSecond &#125; from &#x27;@/config/config.js&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;Home&#x27;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    onMounted(() =&gt; &#123;</span><br><span class="line">        // 打印导入的js文件的内容</span><br><span class="line">      console.log(retFirst, retsSecond)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>在页面打印的效果</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220124113241641.png" alt="image-20220124113241641"></p>
<h2 id="es6导入导出方法"><a href="#es6导入导出方法" class="headerlink" title="es6导入导出方法"></a>es6导入导出方法</h2><ul>
<li>上面我们介绍了如何导出变量 那我们还得知道怎么导入导出方法</li>
<li>在vue中 方法导出很常见 那么一坨方法 不拆分对于页面的可读性十分的差 </li>
<li>导入导出方法 一般使用的是默认导出<code>export default</code> 谁也不想把多个方法放在同一个js文件吧</li>
</ul>
<blockquote>
<p>举个例子</p>
</blockquote>
<ul>
<li>这个例子是Vue3的例子 Vue2实际上也是一样的 只不过Vue3的方法是声明变量的 而Vue2是写在<code>methods</code>中</li>
<li>假设这是Vue3我们声明的一个scrollReveal方法 我们想把设置scrollReveal的方法拆分到单独js文件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">      setup () &#123;</span><br><span class="line">          <span class="comment">// 设置scrollReveal的方法</span></span><br><span class="line">        <span class="keyword">const</span> <span class="title function_">retScroll</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">          data.<span class="property">scrollReveal</span>.<span class="title function_">reveal</span>(<span class="string">&#x27;#reveal-top&#x27;</span>, &#123;</span><br><span class="line">            <span class="comment">// 动画的时长</span></span><br><span class="line">            <span class="attr">duration</span>: <span class="number">600</span>,</span><br><span class="line">            <span class="comment">// 延迟时间</span></span><br><span class="line">            <span class="attr">delay</span>: <span class="number">500</span>,</span><br><span class="line">            <span class="comment">// 动画开始的位置，&#x27;bottom&#x27;, &#x27;left&#x27;, &#x27;top&#x27;, &#x27;right&#x27;</span></span><br><span class="line">            <span class="attr">origin</span>: <span class="string">&#x27;bottom&#x27;</span>,</span><br><span class="line">            <span class="comment">// 回滚的时候是否再次触发动画</span></span><br><span class="line">            <span class="attr">reset</span>: <span class="literal">false</span>,</span><br><span class="line">            <span class="comment">// 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））</span></span><br><span class="line">            <span class="comment">// // useDelay: &#x27;onload&#x27;,</span></span><br><span class="line">            <span class="comment">// 在移动端是否使用动画</span></span><br><span class="line">            <span class="attr">mobile</span>: <span class="literal">true</span>,</span><br><span class="line">            <span class="comment">// 滚动的距离，单位可以用%，rem等</span></span><br><span class="line">            <span class="attr">distance</span>: <span class="string">&#x27;10px&#x27;</span>,</span><br><span class="line">            <span class="comment">// 其他可用的动画效果</span></span><br><span class="line">            <span class="attr">opacity</span>: <span class="number">0.001</span>,</span><br><span class="line">            <span class="comment">// 执行速度 线性函数啥的</span></span><br><span class="line">            <span class="attr">easing</span>: <span class="string">&#x27;cubic-bezier(0.5, 0, 0, 1)&#x27;</span>,</span><br><span class="line">            <span class="comment">// 执行方式（缩放）</span></span><br><span class="line">            <span class="attr">scale</span>: <span class="number">0.9</span></span><br><span class="line">          &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>我们创建一个js文件 使用默认导出<code>export default</code><ul>
<li>导出方法的模板是 <code>export default function 方法名(参数)</code></li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导出配置的scrollReveal 如果这个方法需要传参 记得要给他传参哦</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> <span class="title function_">retScroll</span> (data) &#123;</span><br><span class="line">  data.<span class="property">scrollReveal</span>.<span class="title function_">reveal</span>(<span class="string">&#x27;#reveal-top&#x27;</span>, &#123;</span><br><span class="line">    <span class="comment">// 动画的时长</span></span><br><span class="line">    <span class="attr">duration</span>: <span class="number">600</span>,</span><br><span class="line">    <span class="comment">// 延迟时间</span></span><br><span class="line">    <span class="attr">delay</span>: <span class="number">300</span>,</span><br><span class="line">    <span class="comment">// 动画开始的位置，&#x27;bottom&#x27;, &#x27;left&#x27;, &#x27;top&#x27;, &#x27;right&#x27;</span></span><br><span class="line">    <span class="attr">origin</span>: <span class="string">&#x27;bottom&#x27;</span>,</span><br><span class="line">    <span class="comment">// 回滚的时候是否再次触发动画</span></span><br><span class="line">    <span class="attr">reset</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="comment">// 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））</span></span><br><span class="line">    <span class="comment">// // useDelay: &#x27;onload&#x27;,</span></span><br><span class="line">    <span class="comment">// 在移动端是否使用动画</span></span><br><span class="line">    <span class="attr">mobile</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="comment">// 滚动的距离，单位可以用%，rem等</span></span><br><span class="line">    <span class="attr">distance</span>: <span class="string">&#x27;10px&#x27;</span>,</span><br><span class="line">    <span class="comment">// 其他可用的动画效果</span></span><br><span class="line">    <span class="attr">opacity</span>: <span class="number">0.01</span>,</span><br><span class="line">    <span class="comment">// 执行速度 线性函数啥的</span></span><br><span class="line">    <span class="attr">easing</span>: <span class="string">&#x27;cubic-bezier(0.5, 0, 0, 1)&#x27;</span>,</span><br><span class="line">    <span class="comment">// 执行方式（缩放）</span></span><br><span class="line">    <span class="attr">scale</span>: <span class="number">0.9</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>然后把原来Vue3声明的scrollReveal方法删掉 导入我们封装的js方法<ul>
<li>因为我们用的是默认导出 所以导入的名称可以随意命名</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">import</span> &#123; onMounted, reactive &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line">    <span class="comment">// 导入scrollReveal</span></span><br><span class="line">    <span class="keyword">import</span> scrollReveal <span class="keyword">from</span> <span class="string">&#x27;scrollreveal&#x27;</span></span><br><span class="line">    <span class="comment">// 导入配置的scrollReveal</span></span><br><span class="line">    <span class="keyword">import</span> retScroll <span class="keyword">from</span> <span class="string">&#x27;@/utils/scroll.js&#x27;</span></span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span><br><span class="line">      <span class="attr">components</span>: &#123;</span><br><span class="line">      &#125;,</span><br><span class="line">      setup () &#123;</span><br><span class="line">        <span class="comment">// 赋值</span></span><br><span class="line">        <span class="keyword">const</span> data = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">          <span class="attr">scrollReveal</span>: <span class="title function_">scrollReveal</span>(),</span><br><span class="line">          <span class="attr">typewriter</span>: res.<span class="property">my_typewriter</span></span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="comment">// 页面加载声明周期</span></span><br><span class="line">        <span class="title function_">onMounted</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">          <span class="comment">// 启动scrollReveal的方法 需要传参</span></span><br><span class="line">          <span class="title function_">retScroll</span>(data)</span><br><span class="line">          <span class="variable language_">console</span>.<span class="title function_">log</span>(data.<span class="property">typewriter</span>)</span><br><span class="line">        &#125;)</span><br><span class="line">        </span><br><span class="line">        <span class="keyword">return</span> &#123;&#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<h2 id="使用CommonJs导出导入"><a href="#使用CommonJs导出导入" class="headerlink" title="使用CommonJs导出导入"></a>使用CommonJs导出导入</h2><ul>
<li>在es6没出来之前 也诞生了一种模块CommonJs模块的导出导入 </li>
<li>CommonJs模块 这种导出方式实际上我也不太清楚 但是他的兼容性很好 node和一些特殊js配置文件 就必须需要使用CommonJs模块<ul>
<li>CommonJs模块 使用方法是 <code>module.exports</code>进行导出 <code>require()</code>来导入</li>
<li>比如<code>vue.config.js</code> Vue cli脚手架配置文件 就需要使用 <code>require()</code> 不能使用<code>import</code> 而且<code>vue.config.js</code>配置文件 不支持<code>@</code>因为他在根路径中而非<code>src</code>中</li>
</ul>
</li>
</ul>
<blockquote>
<p>举个例子</p>
</blockquote>
<ul>
<li>我们想导出一些定义的属性 需要使用<code>module.exports</code> 类似于<code>export default</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">my_title</span>: <span class="string">&#x27;个人简历_刘凯利&#x27;</span>,</span><br><span class="line">  <span class="attr">my_name</span>: <span class="string">&#x27;刘凯利&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>我需要在Vue文件内导入<ul>
<li>注意奥 我们使用<code>require()</code>导入的时候 需要用变量去接收 否则你怎么使用捏</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">const res = require(&#x27;@/config.js&#x27;)</span><br><span class="line">import &#123; onMounted &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;Home&#x27;,</span><br><span class="line">  components: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    onMounted(() =&gt; &#123;</span><br><span class="line">        // 打印导入的js文件的内容</span><br><span class="line">      console.log(res)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>页面打印的效果</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220125154157328.png" alt="image-20220125154157328"></p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
<li>命名和默认的ES6导出本质上没有任何区别 都是模块化导出导入数据 那么我们会根据场景来使用 通常我们不需要导出多个对象的时候 我们就使用默认导出 如果我们需要导出多个对象的话 就用命名导出</li>
<li>vue中就是使用的默认导出</li>
<li>CommonJs模块输出的是一个值的拷贝，ES6模块输出的是值的引用。</li>
<li>CommonJs模块是运行时加载，ES6模块是编译时输出接口。</li>
<li><font color =#ff3040>注意: <code>vue.config.js</code> (vue脚手架配置文件) 它不支持ES6导出导入 必须用CommonJs导出导入</font></li>
</ul>
<h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/144475026">彻底理解JavaScript ES6中的import和export</a></p>
<p><a target="_blank" rel="noopener" href="https://www.jianshu.com/p/2822e717592f">理解JS ES6中的模块化（export和import）</a></p>
<p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000021911869">require和import的区别</a></p>

        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2022/01/24/JavaScript/0.5_es6_export/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2022/01/24/JavaScript/0.5_es6_export/";
            const title         = "「ES6的导出导入方式」";
            const excerpt       = `::: tip 介绍
学习一下常用的ES6的导出导入方式:::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/JavaScript/" rel="tag">JavaScript</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" App.vue中的id问题" href="/2022/01/24/Vue/1.3_vue_fun/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" flex布局属性简介" href="/2022/01/25/css/flex/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>